<template>
  <div
    class="v-shape-font-size"
    style="height: 100%"
  >
    <m-dropdown
      class="g-jc-sb g-pd-lr-7 g-pointer _slect-border _font-style height-100"
      :class="{ 'g-disabled': disabled }"
      style="align-items: center; height: 100%"
    >
      <span class="g-one-line">
        {{ row.value }}
      </span>
      <img src="statics/images/sidebar/arrowDown.svg" />
      <template #dropdown>
        <m-dropdown-menu-item
          v-for="item in fontSizes"
          :key="item.label"
          class="g-jc-sb __format-define g-m-b-4"
          @click="handleClickFontSize(item)"
        >
          <span>
            {{ item.label }}
          </span>
        </m-dropdown-menu-item>
      </template>
    </m-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { ShapeStyleValue } from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";

const props = defineProps<{
  row: ShapeStyleValue;
  selected?: boolean;
  configurationDisabled?: boolean;
}>();

const fontSizes = [
  { label: 12, value: 12 },
  { label: 14, value: 14 },
  { label: 16, value: 16 },
  { label: 18, value: 18 },
  { label: 22, value: 22 },
  { label: 26, value: 26 },
  { label: 32, value: 32 },
  { label: 48, value: 48 },
  { label: 60, value: 60 },
  { label: 72, value: 72 }
];

const disabled = computed(() => {
  return props.configurationDisabled;
});

const handleClickFontSize = item => {
  props.row.value = item.value;
};
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-shape-font-size {
  .__format-define {
    height: 24px;
    font-size: 11px;
    font-weight: normal;

    // &:hover {
    //   background-color: $theme-color;
    //   color: #ffffff;
    // }

    .__format-define-size {
      color: #000000;
      opacity: 0.45;
    }

    ._style-set {
      overflow: hidden;
    }
  }
}
</style>
